<template>
	<view class="video-container">
		<Title :showqiehuan="showqiehuan"></Title>
		<Video ref="mTikTokRef" :video-list="state.videoList" @loadMore="loadMore" @change="change">
			<!-- 此处为用户完全自定义 data 中的数据为当前渲染的数据 -->
			<template v-slot="data">
				<!-- active修复视频悬浮层消失和点击的问题 -->
				<view class="video-side-right" :class="{ active: state.cutVideo.id === data.item.id }">
					<view class="action-item action-item-user">
						<image class="shop-logo" :src="data.item.user_id.image" @click="tiaozhuan" />
						<view :class="data.item.user_id._id == _id ? 'action-none' : 'action-btn'">
							<text :class="data.item.user_id._id == _id ? 'action-none' : 'iconfont'" @click="guanzhu(data.item.user_id._id)">+</text>
						</view>
						<text class="action-item-text"></text>
					</view>
					<view class="action-item">
						<uni-icons type="heart-filled" size="30" color="white" @click="dianzan(data.item._id)"></uni-icons>
						<text class="action-item-text">{{ data.item.video_thumbs_up }}</text>
					</view>
					<view class="action-item" @click="open">
						<uni-icons type="chat-filled" color="white" size="30"></uni-icons>
						<text class="action-item-text">{{ data.item.id }}</text>
					</view>
					<view class="action-item">
						<uni-icons type="star-filled" color="white" size="30" @click="shoucang(data.item._id, event)"></uni-icons>
						<text class="action-item-text">{{ data.item.video_collection }}</text>
					</view>
					<view class="action-item">
						<uni-icons type="redo-filled" color="white" size="30"></uni-icons>
						<text class="action-item-text">分享</text>
					</view>
					<wd-popup v-model="show7" position="bottom" :close-on-click-modal="true" closable custom-style="height: 400px;">
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">弹弹弹12312312312</text>
						<text class="custom-txt">
							<input type="text" value="" placeholder="请输入评论" />
							<button type="default">添加s</button>
						</text>
					</wd-popup>
				</view>
				<!-- active修复视频悬浮层消失和点击的问题 -->
				<view class="video-bottom-area" :class="{ active: state.cutVideo.id === data.item.id }">
					<view class="shop_area">#{{ data.item.video_address }}</view>
					<view class="shop-name">@{{ data.item.user_id.name }}</view>
					<view class="shop-card">{{ data.item.video_desc }}</view>
				</view>
			</template>
		</Video>
		<Bottom></Bottom>
	</view>
</template>

<script lang="ts" setup>
import Title from './component/title.vue';
import Bottom from '../Component/bottom';
import Video from './component/video.vue';
import { onMounted, reactive, ref } from 'vue';
import { get_video, postdianzan, postshoucang, postguanzhu } from '../../api/api';
const mTikTokRef = ref<InstanceType<typeof Video>>();
const state = reactive({
	cutVideo: {} as AnyObject,
	videoList: [
		// {
		// 	src: './component/相信光吗.mp4',
		// 	id: '1',
		// 	name: 'aaaaaa',
		// 	desc: '这里是简介内容',
		// 	dianzan: 1230,
		// 	shoucang: 12,
		// 	zhuanfa: 1,
		// 	pinglun: 120
		// },
		// {
		// 	src: './component/猫.mp4',
		// 	id: '2',
		// 	name: 'bbbbbb',
		// 	desc: '这里是简介内容',
		// 	dianzan: 1230,
		// 	shoucang: 12,
		// 	zhuanfa: 1,
		// 	pinglun: 120
		// },
		// {
		// 	src: 'http://vjs.zencdn.net/v/oceans.mp4',
		// 	id: '3',
		// 	name: 'vvvvvv',
		// 	desc: '这里是简介内容',
		// 	dianzan: 1230,
		// 	shoucang: 12,
		// 	zhuanfa: 1,
		// 	pinglun: 120
		// }
	]
});

let count = ref(0);
const change = (e: any) => {
	state.cutVideo = e.detail;
	count.value = e.index;
	// console.log('🚀 ~ file: index.vue:53 ~ change ~ data:', e);
};

let video_state = ref(false);
let _id = localStorage.getItem('_id');
// 获取数据
const getter_video = async () => {
	let data = await get_video({});
	state.videoList = data.data;
	// console.log(data.data);
};

// 视频点赞
let dian_color = ref('red');
const dianzan = async (item: any) => {
	// console.log(count.value);
	let data = await postdianzan({ _id: item });
	if (data.msg == '点赞成功') {
		dian_color.value = 'red';
	} else {
		dian_color.value = 'white';
	}
};

// 视频收藏
let shoucang_color = ref('yellow');
const shoucang = async (item: any, e: any) => {
	let data = await postshoucang({ _id: item });
	if (data.msg == '收藏成功') {
		shoucang_color.value = 'yellow';
	} else {
		shoucang_color.value = 'white';
	}
};

const loadMore = () => {
	// 触发加载更多
	// console.log('加载更多');
};

// 播放第几个
const playIndex = (index: number) => {
	mTikTokRef.value?.initSwiperData(index);
};

onMounted(() => {
	// 直接播放第3个
	// playIndex(3);
	getter_video();
});

// 弹出层

let show7 = ref(false);
const open = () => {
	show7.value = !show7.value;
};

// 推荐/关注页面切换
let show = ref(2);
const showqiehuan = (item: number) => {
	show.value = item;
};

// 关注
const guanzhu = async (item: any) => {
	const data = await postguanzhu({ _id: item });
};

const tiaozhuan = () => {
	uni.navigateTo({
		url: `/pages/Cover/Cover?type=${true}`
	});
};
</script>

<style scoped lang="scss">
$zIndex: 99;
.shop_area {
	display: inline-block;
	padding: 0.3rem;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.5);
	margin-bottom: 10px;
}
.video-layer {
	position: absolute;
	right: 12px;
	bottom: 120px;
	color: #fff;
}

.video-bottom-area {
	position: absolute;
	left: 20px;
	bottom: 40px;
	opacity: 0;
	transition: all 250ms;
	z-index: 0;

	&.active {
		opacity: 1;
		z-index: $zIndex;
		transition-delay: 200ms;
	}

	.shop-name {
		color: #fff;
		margin-bottom: 6px;
	}

	.shop-card {
		width: 160px;
		height: 80px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 4px;
		overflow: hidden;
	}
}

.video-side-right {
	position: absolute;
	right: 12px;
	bottom: 120px;
	color: #fff;
	opacity: 0;
	transition: all 250ms;
	z-index: 0;

	&.active {
		opacity: 1;
		z-index: $zIndex;
		transition-delay: 200ms;
	}

	.action-item {
		position: relative;
		margin-bottom: 30px;
		text-align: center;
		color: white;
		.shop-logo {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
		}

		.iconfont {
			display: block;
			font-size: 28px;
		}
		.iconfontred {
			display: block;
			font-size: 28px;
			color: red;
		}

		.action-item-text {
			display: block;
			font-size: 12px;
		}

		.action-btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -8px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f60;

			.iconfont {
				font-size: 16px;
			}
		}
	}

	.action-item-user {
		margin-bottom: 40px;
	}
}
.custom-txt {
	color: black;
}
.action-none {
	display: none;
}
</style>
